<template>
  <div class="register">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
      <el-form-item prop="username">
        <el-input v-model="ruleForm.username" placeholder="用户名手机"></el-input>
      </el-form-item>
      <el-form-item prop="captcha">
        <el-input v-model="ruleForm.captcha" placeholder="验证码" class="Verification"></el-input>
        <el-button class="VerificationBtn" @click="getVerification">{{captcha}}</el-button>
      </el-form-item>
      <el-form-item prop="nickname">
        <el-input v-model="ruleForm.nickname" placeholder="你的名字"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="ruleForm.password" placeholder="密码"></el-input>
      </el-form-item>
      <el-form-item prop="passwords">
        <el-input v-model="ruleForm.passwords" placeholder="确认密码"></el-input>
      </el-form-item>
      <el-button type="primary" class="registerBtn" @click="registerBtn">注册</el-button>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    let validateName = (rule, value, callback) => {
      let isTrue = /^1[3-9][0-9]{9}$/.test(value);
      if (isTrue) {
        callback();
      } else {
        callback(new Error("手机号码格式不对"));
      }
    };
    let validatePass = (rule, value, callback) => {
      if (value !== this.ruleForm.password) {
        callback(new Error("密码不一致"));
      } else {
        callback();
      }
    };
    return {
      captcha: "点击获取验证码",
      ruleForm: {
        username: "13113981593",
        nickname: "左良",
        captcha: "000000",
        password: "000000",
        passwords: "000000"
      },
      rules: {
        username: [{ validator: validateName, trigger: "blur" }],
        nickname: [
          { required: true, message: "请输入你的昵称", trigger: "blur" }
        ],
        captcha: [{ required: true, message: "请输入验证码", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        passwords: [{ validator: validatePass, trigger: "blur" }]
      }
    };
  },
  methods: {
    getVerification() {
      if (/^1[3-9][0-9]{9}$/.test(this.ruleForm.username)) {
        this.$axios({
          url: "/captchas",
          data: {
            tel: this.ruleForm.username
          }
        }).then(res => {
          this.captcha = res.data[0].code;
        });
      }
    },
    registerBtn() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
           const {passwords, ...props} = this.ruleForm;
           console.log(props);
           
          this.$axios({
            method: "post",
            url: "/accounts/register",
            data: props
          }).then(res => {
            console.log(res);
          });
        }else{
          return false;
        }
      });
    }
  }
};
</script>

<style socped lang='less'>
.demo-ruleForm {
  padding: 10px;
}
.registerBtn {
  width: 100%;
}
.Verification {
  width: 67%;
}
.VerificationBtn {
  float: right;
  width: 33%;
}
</style>